<!DOCTYPE html>
<html lang="en">
<!-- MAIN HEADER -->
<div class="panel-group" id="accordion" th:fragment="product">
	<div class="divline"></div>
	<div class="panel panel-default" th:each="prd,prdState: ${products}">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" th:href="@{'#coll'+${prd.id}}">
					<div class="product-widget">
						<div class="product-img">
							<img th:src="@{${prd.pictures.size()} > 0?${prd.pictures.get(0).url}:'static/image/image.png'}" src="static/image/image.png" alt="">
						</div>
						<div class="product-body">
							<h3 class="product-name" th:text="${prd.productName}">product name goes here</h3>
							<h4 class="product-price" th:text="${prd.productPrice}">$980.00
								<del class="product-old-price">$990.00</del>
							</h4>
							<p class="product-category" th:text="${prd.productSymbol}">Category</p>
						</div>
					</div>
				</a>
			</h4>
		</div>
		<div id="collapseOne" th:id="'coll'+${prd.id}" class="panel-collapse collapse">
			<!-- in -->
			<div class="panel-body">
				<!--图片轮播-->
				<div id="carousel-example-generic" th:id="${prd.id}" class="carousel slide" 
					data-ride="carousel" style="vertical-align: middle;">
					<!--轮播图片的提示点-->
					<ol class="carousel-indicators">
							<li data-target ="#carousel-example-generic"
							th:attr="data-target='#'+${prd.id},data-slide-to=${imgState.index}" 
							class="active" th:class="${imgState.index eq 0 ? active:''}" 
							th:each="img,imgState:${prd.pictures}"></li>
					</ol>
					<!--轮播图片-->
					<div class="carousel-inner" role="listbox" align="center" 
						 style="height: 250px;text-align: center;vertical-align: middle;">
						<div class="item active" th:each="img,imgState:${prd.pictures}" th:class="${imgState.index eq 0 ?'item active':'item'}">
							<div class="img-box">
							 	<img th:src="@{${img.url}}" alt="1" th:alt="${imgState.index}" style="height: 250px;width: auto">
							 </div>
						</div>
					</div>
					<!--左右滑动图标-->
					<a class="left carousel-control" href="#carousel-example-generic"
						th:href="@{'#'+${prd.id}}"
						role="button" data-slide="prev"> 
						<i class="fa fa-angle-double-left"></i> 
						<span class="sr-only">Previous</span>
					</a> 
					<a class="right carousel-control" href="#carousel-example-generic" 
						th:href="@{'#'+${prd.id}}"
						role="button" data-slide="next">
						<i class="fa fa-angle-double-right" aria-hidden="true"></i> 
						<span class="sr-only">Next</span>
					</a>
				</div>
				<!-- Products tab & slick -->
				<div class="col-md-12" >
					<div class="divline"></div>
					<div class="row" align="right">
						<a class="btn btn-primary"> <i class="fa fa-trash"></i> <span>删除</span></a>
						<a class="btn btn-primary"> <i class="fa fa-arrow-down"></i> <span>下架</span></a>
						<a class="btn btn-primary"> <i class="fa fa-wrench"></i> <span>修改</span></a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- /panel panel-default -->
</div>
</html>